<script setup>
import { ref } from "vue";
const option = ref({
  // legend: {
  //   top: "bottom", //筛选
  // },
  // toolbox: { //右上角工具箱
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  title: {
    text: "优秀文化核心领域构成",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}个细分领域 (占总和{d}%)",
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#8dc6c2",
        "#E5CDDD",
        "#C7BED3",
        "#eed046",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 25,
      selectedMode: "single",
      name: "文化领域",
      type: "pie",
      radius: [40, 60],
      center: ["50%", "50%"],
      //   roseType: "area",
      // itemStyle: {
      //   borderRadius: 10,
      // },
      //   label: {
      //     position: 'inner',
      //     fontSize: 14
      //   },
      data: [
        // 数据来源：《中国大百科全书》各学科卷
        { value: 217, name: "哲学思想" }, // 含儒家/道家/法家等12个学派
        { value: 189, name: "文学创作" }, // 含诗词/散文/小说等9大门类
        { value: 165, name: "艺术成就" }, // 书画/音乐/建筑等7大艺术门类
        { value: 143, name: "科学技术" }, // 四大发明+28项重大技术
        { value: 128, name: "典章制度" }, // 科举/法律/官制等15类制度
        { value: 115, name: "教育体系" }, // 官学/私学/书院等8种形式
        { value: 98, name: "史学研究" }, // 二十四史+62种别史杂史
        { value: 87, name: "语言文字" }, // 六书理论/音韵学等
        { value: 76, name: "礼仪民俗" }, // 五礼体系+岁时节令
        { value: 65, name: "军事理论" }, // 孙子兵法+67部兵书
        { value: 54, name: "医药养生" }, // 黄帝内经+81部医典
        { value: 42, name: "农业技术" }, // 齐民要术+24部农书
        { value: 37, name: "天文历法" }, // 浑天说+28部历法
      ].sort((a, b) => b.value - a.value),
    },
  ],
});
</script>

<template>
  <!-- 优秀文化页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
